<template>
  <!-- 导入完成提示 -->
  <Dialog
    :visible.sync="propVisible"
    title="导入完成"
    @close="$emit('update:visible', false)"
  >
    <div class="u-p20">
      <el-row
        class="import-count"
        type="flex"
      >
        <el-col>导入成功数据：{{success}}</el-col>
        <el-col>导入失败数据：{{fail}}</el-col>
      </el-row>
      <dl
        class="import-error"
        v-if="messages.length"
      >
        <dt>失败原因</dt>
        <dd class="import-error__main">
          <ul class="import-error__list">
            <li
              v-for="(item, index) in messages"
              :key="index"
            >{{item}}</li>
          </ul>
        </dd>
      </dl>
    </div>
  </Dialog>
</template>

<script>
import Dialog from "@/components/dialog";

export default {
  name: "DialogImport",
  components: {
    Dialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 导入成功的数据数
    success: {
      type: Number,
      default: 0
    },
    // 导入失败的数据数
    fail: {
      type: Number,
      default: 0
    },
    // 失败原因描述列表
    messages: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  watch: {
    visible(v) {
      this.propVisible = v;
    }
  },
  data() {
    return {
      propVisible: this.visible
    };
  }
};
</script>

<style scoped lang="scss">
@import "~@/assets/scss/color";

.import-count {
  line-height: 24px;
  margin-bottom: 10px;
}
.import-error {
  margin: 0;
  line-height: 24px;
  &__main {
    height: 96px;
    overflow-y: auto;
    margin-left: 0;
  }
  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
    text-indent: 2em;
    color: $--hint-major;
  }
}
</style>